<script setup>

const imageUrl=ref('');
nickName:'';
avatar: '';
content:'';
nickname:'';
createTime:'';
// const avatar = ref('https://example.com/avatar.jpg'); // 头像的URL
// const nickname = ref('John Doe'); // 昵称
// const createTime = ref('2023-07-01'); // 创建时间，可以根据实际需求使用日期函数转换为所需格式
// const content = ref('这是一个示例内容'); // 内容
// const imageUrl = ref('https://example.com/image.jpg'); // 图片的URL

</script>

<template>

  <div class="item">
    <el-image
        class="avatar"
        :src="avatar"
        fit="contain"
        alt="Avatar"
    />
    <div class="info">
      <h3>{{ nickname }}</h3>
      <p>{{ createTime }}</p>
    </div>
    <div class="content">
      {{ content }}
    </div>
    <el-image
        class="image"
        :src="imageUrl"
        fit="contain"
        alt="Image"
    />
  </div>
</template>

<style scoped>
.info {
  margin-bottom: 10px;
}

.item {
  display: flex;
  flex-direction: column;
  align-items: center; /* 根据需要调整对齐方式 */
}

.avatar, .image {
  margin-right: 10px; /* 根据需要调整间距 */
}
</style>